import React from 'react';
import ReactDom from 'react-dom';
//render props
class MouseTracker extends React.Component {
  state={x:0,y:0}
  handleMove =(e)=>{
    this.setState({
      x: e.clientX,
      y: e.clientY
    })
  }
  render(){
    return <div onMouseMove={this.handleMove}>
     {/* {this.props.children(this.state)} 第一种*/}
     {this.props.render(this.state)}
    </div>
  }
}

//1.组件的儿子是一个函数
// ReactDom.render(
//   <MouseTracker>
//     {
//       props=>(
//         <>
//           <h1>移动鼠标</h1>
//           <p>你当前的鼠标位置是{props.x},{props.y}</p>
//         </>
//       )
//     }
//   </MouseTracker>,
//   document.getElementById('root')
// )

//2.render
ReactDom.render(
  <MouseTracker render={
      props=>(
        <>
          <h1>移动鼠标</h1>
          <p>你当前的鼠标位置是{props.x},{props.y}</p>
        </>
      )
  }/>,
  document.getElementById('root')
)

